<template>
  <div>
    <el-row
      v-for="item1 in row"
      :key="item1.id"
      align="middle"
      class="row-nav1"
    >
      <el-col :span="4">
        <el-tag type="" closable size="large" @close="closeTag(item1.id)">{{
          item1.authName
        }}</el-tag>
        <el-icon><CaretRight /></el-icon>
      </el-col>
      <el-col :span="20">
        <el-row v-for="item2 in item1.children" :key="item2.id" align="middle">
          <el-col :span="8">
            <el-tag
              type="success"
              closable
              size="large"
              @close="closeTag(item2.id)"
              >{{ item2.authName }}</el-tag
            >
            <el-icon><CaretRight /></el-icon>
          </el-col>
          <el-row></el-row>
          <el-col :span="12">
            <span v-for="item3 in item2.children" :key="item3.id">
              <el-tag
                type="warning"
                closable
                size="large"
                @close="closeTag(item3.id)"
                >{{ item3.authName }}</el-tag
              >
            </span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { defineProps, reactive } from "vue";
import { deleteChoicerole } from "@/api/roleList";
import { ElMessage, ElMessageBox } from "element-plus";
let props = defineProps({
  scope: {
    type: Object,
  },
});
let row = reactive(props.scope.row.children);

const closeTag = async (rightId) => {
  ElMessageBox.confirm("此操作将删除该权限, 是否继续?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await deleteChoicerole(props.scope.row.id, rightId);
      let ls = Boolean(res.meta.status >= 200 && res.meta.status < 300);
      ElMessage({
        type: ls ? "success" : "error",
        message: ls ? "删除成功" : res.meta.msg,
      });
      row.splice(0);
      row.push(...res.data);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
</script>

<style lang="scss" scoped>
.row-nav1 {
  border: 1px #ebeef5 solid;
  border-bottom: none;
  .el-row {
    border-bottom: 1px #ebeef5 solid;

    div {
      padding: 5px;
    }
  }
  .el-row:last-child {
    border-bottom: none;
  }
}
.el-row:last-child {
  margin-bottom: 0px;
  border-bottom: 1px #ebeef5 solid;
}
.el-tag {
  margin-left: 10px;
}
</style>